<script lang="ts">
  export default {
    name: 'Home',
  };
</script>

<script setup lang="ts">
  import { onMounted, ref, reactive } from 'vue';
  import { useRouter } from 'vue-router';
  import API_HOME from '@/apis/home'
  import storage from 'good-storage';
  import { useShopNav } from '@/store/modules/app';
  const appStore = useShopNav();
  const router = useRouter();
  let carouselData = ref([])
  const goPage = (path, data) => {
    router.push({
      path: path,
      query: {
        goodsId: data
      }
    })
  }
  let filteredProducts = ref([

  ])
  const getList = async () => {
    let res = await API_HOME.indexGoodsList()
    if (res.code == 1) {
      filteredProducts.value = res.data
    }
  }
  let getCarousel = async () => {

    let res = await API_HOME.indexCarousel()
    if (res.code == 1) {
      carouselData.value = res.data

    }
  }
  let isMobile = ref(false)
  // 检测设备函数
  const checkDevice = () => {
    isMobile.value = window.innerWidth <= 768;
  };

  onMounted(() => {
    window.addEventListener('resize', checkDevice);
    checkDevice(); // 初始检测
    getList()
    appStore.getCarList()
    getCarousel()
  })
</script>

<template>
  <div>
    <Shop_headers></Shop_headers>
    <div class="shopContainer">
      <div class="adv">
        <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
          <van-swipe-item v-for="(i,index) in carouselData" :key="index">
            <div v-if="isMobile">
              <img :src="i.mobile_image" alt="" @click="goPage('/goodsDetail',i.goods_id)">
            </div>
            <div v-else>
              <img :src="i.image" alt="" style="object-fit:fill;" @click="goPage('/goodsDetail',i.goods_id)">
            </div>

          </van-swipe-item>
        </van-swipe>

      </div>
      <div>
        <Goods_list :filteredProducts="filteredProducts"></Goods_list>
      </div>
    </div>
    <Shop_footer></Shop_footer>
  </div>

</template>

<style lang="less" scoped>
  .my-swipe .van-swipe-item {

    font-size: 20px;
    text-align: center;
    height: 500px;
  }

  .shop_home {
    background-color: #ccc;
  }

  .adv {
    position: relative;
    /* width: 100%; */
    height: 550px;

    .description {
      position: absolute;
      top: 0;
      left: 0;
      padding: 5%;
      margin-top: 4%;
      width: 50%;

      .tit {
        font-size: 40px;
        margin-bottom: 5%;
        font-weight: 500;

      }

      .font {
        font-size: 26px;
        margin: 5% 0;
      }

      h2 {
        padding: 5% 0;
      }
    }

    img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      /* 关键属性 */
    }
  }

  @media screen and (max-width: 768px) {
    .adv {
      object-fit: fill;
      height: 330px;
      width: 100%;

      .description {
        width: 90%;

        .tit {
          font-size: 30px;
        }

        .font {
          font-size: 20px;
        }

        h2 {
          padding: 0;
        }
      }
    }

    .my-swipe .van-swipe-item {

      font-size: 20px;
      text-align: center;

    }
  }
</style>